<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/same.css">

    <style>
        .layui-tab-title .layui-this {
            color: #409eff;
        }

        .layui-timeline-item .layui-panel {
            -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
            height: 80px;
            line-height: 40px;
            color: black;
            width: 600px;
        }

        .layui-bg-gray label {
            color: black;
        }

        /* 头像旁的徽章样式 */
        .isShow {
            display: none;
        }

        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>


<body>

    <div style="position: relative;" id="app" v-cloak>
        <div class="layui-layout layui-layout-admin">
            <!-- 导航 -->
            <div class="layui-header">

                <div class="layui-logo">
                    <img src="../image/logo.png" style="margin-top: -15px;margin-left: -25px;">
                    <!-- <span>阿里迪里考试</span> -->
                </div>

                <!-- 头部区域（可配合layui已有的水平导航） -->
                <ul class="layui-nav layui-layout-right" style="margin-right: 130px;">
                    <li class="layui-nav-item"><a href="index.html">首页</a></li>
                    <li class="layui-nav-item"><a href="exam_center.html">试卷中心</a></li>
                    <li class="layui-nav-item"><a href="exam_record.html">考试记录</a></li>
                    <li class="layui-nav-item"><a href="error_question.html">错题本</a></li>

                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item"><a> <img v-bind:src="'../image/'+user.image" class="layui-nav-img">
                            <span class="layui-badge-dot" :class="{isShow:unreadNum==0}"
                                style="top: 30%;margin: -5px -8px 0;"></span></a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="personal.html">个人中心</a>
                            </dd>
                            <dd>
                                <a href="home_message.html">消息中心
                                    <span class="layui-badge" :class="{isShow:unreadNum==0}"
                                        style="margin-top: -20px;right: -3px;border-radius: 50%;">
                                        {{unreadNum}}</span>
                                </a>
                            </dd>
                            <hr>
                            <dd>
                                <a id="logout">退出</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <div>
                <div class="layui-bg-gray"
                    style="padding: 100px;display: inline-block;background-color: white!important;">
                    <div class="layui-row layui-col-space15" style="margin-top:0 ;">
                        <div
                            style="width: 300px;-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);background-color: white;">
                            <div class="layui-panel"
                                style="border-style: none;box-shadow: 1px 1px 4px rgb(0 0 0 / 0%);">
                                <div style="padding: 20px 20px;">个人信息</div>
                                <hr>
                                <div style="padding: 10px 20px;">
                                    <div style="padding: 0px 0px;text-align: center;">
                                        <span id="test2">
                                            <img v-bind:src="'../image/'+user.image"
                                                style="width: 100px;height: 100px;border-radius: 50%;" id="test1">
                                            <br /><br />
                                            <label>{{user.userName}}</label>
                                        </span>
                                    </div>
                                    <hr>
                                    <div>
                                        <label>姓名：</label><span>{{user.realName}}</span><br /><br />
                                        <label>年级：</label><span>{{user.userLevel}}</span><br /><br />
                                        <label>出生年月：</label><span>{{user.birthday}}</span><br /><br />
                                        <label>注册时间：</label><span>{{user.createTime}}</span><br /><br />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab" lay-filter="test"
                    style="display: inline-block;position:absolute;right: auto;top: 90px;-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);width: 700px;padding: 40px;">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="11">用户动态</li>
                        <li lay-id="22">个人资料修改</li>
                        <li lay-id="33">修改密码</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" style="height:600px;overflow: scroll;">
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"></fieldset>
                            <ul class="layui-timeline">
                                <li class="layui-timeline-item" v-for="(l,i) in logs" :key="l.logId">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title" style="font-size: 13px;color: #909399;">
                                            {{l.createTime}}</h3>
                                        <div class="layui-panel">
                                            <p style="margin: 25px;">{{l.userName}}{{l.content}}</p>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <div class="layui-tab-item">
                            <form class="layui-form" id="personForm">
                                <!-- 隐藏域，用于存储用户ID -->
                                <input type="hidden" name="userId" v-bind:value="user.userId">
                                <div class="layui-form-item" style="margin-bottom: 30px;">
                                    <label class="layui-form-label"><span style="color: red;">*</span>真实姓名：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="realName" id="realName" lay-verify="title"
                                            autocomplete="off" v-bind:value="user.realName" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 30px;">
                                    <label class="layui-form-label">年龄：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="age" id="age" lay-verify="title" autocomplete="off"
                                            v-bind:value="user.age" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline" style="margin-bottom: 30px;">
                                    <label class="layui-form-label">性别：</label>
                                    <div class="layui-input-inline">
                                        <select name="sex" id="sex" lay-verify="required" lay-search="">
                                            <option v-bind:value="user.sex">{{user.sex}}</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                </div>
                                <p />

                                <div class="layui-inline" style="margin-bottom: 30px;">
                                    <label class="layui-form-label">出生日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="birthday" id="date" lay-verify="date"
                                            v-bind:value="user.birthday" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 30px;">
                                    <label class="layui-form-label">手机：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="phone" id="phone" lay-verify="title" autocomplete="off"
                                            v-bind:value="user.phone" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline" style="margin-bottom: 30px;">
                                    <label class="layui-form-label"><span style="color: red;">*</span>年级：</label>
                                    <div class="layui-input-inline">
                                        <select name="userLevel" id="userLevel" lay-verify="required" lay-search="">
                                            <option v-bind:value="user.userLevel">{{user.userLevel}}</option>
                                            <option value="一年级">一年级</option>
                                            <option value="二年级">二年级</option>
                                            <option value="三年级">三年级</option>
                                            <option value="四年级">四年级</option>
                                            <option value="五年级">五年级</option>
                                            <option value="六年级">六年级</option>
                                            <option value="初一">初一</option>
                                            <option value="初二">初二</option>
                                            <option value="初三">初三</option>
                                            <option value="高一">高一</option>
                                            <option value="高二">高二</option>
                                            <option value="高三">高三</option>
                                        </select>
                                    </div>
                                </div>

                                <div style="margin-left: 110px;">
                                    <button class="layui-btn layui-btn-normal" style="border-radius: 5px;" type="button"
                                        @click="update">更新</button>
                                </div>
                            </form>
                        </div>

                        <div class="layui-tab-item">
                            <form class="layui-form">
                                <div class="layui-form-item" style="margin-bottom: 30px;">
                                    <label class="layui-form-label"><span style="color: red;">*</span>旧密码：</label>
                                    <div class="layui-input-block">
                                        <input type="password" id="oldPass" lay-verify="title" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 30px;">
                                    <label class="layui-form-label"><span style="color: red;">*</span>新密码：</label>
                                    <div class="layui-input-block">
                                        <input type="password" id="newPass" lay-verify="title" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-bottom: 30px;">
                                    <label class="layui-form-label"><span style="color: red;">*</span>确认密码：</label>
                                    <div class="layui-input-block">
                                        <input type="password" id="newPass2" lay-verify="title" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>

                                <div style="margin-left: 110px;">
                                    <button class="layui-btn layui-btn-normal" style="border-radius: 5px;" type="button"
                                        @click="updatePass">更新</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div id="back-top">
            <i class="layui-icon layui-icon-top" style="font-size: 38px;font-weight: 600;"></i>
        </div>

        <!-- 底部板块 -->
        <div style="width: 100%;position: absolute;margin-top: 200px;">
            <footer class="el-footer user-footer app-item-contain footer-mai-d">
                <div class="container">
                    <div class="left">
                        <div class="footer-main element">
                            <span>新手指南</span>
                            <a>购买中心</a>
                            <a>系统简介</a>
                            <a>用户手册</a>
                        </div>

                        <div class="footer-main element">
                            <span>合作伙伴</span>
                            <a>中国红十字会</a><a>中国人民解放军</a>
                            <a>国家标准技术审评中心</a>
                            <a>中科软科技股份有限公司</a>
                        </div>

                        <div class="footer-main element">
                            <span>关于我们</span>
                            <a>企业官网</a>
                            <a>产品介绍</a>
                            <a class="feedback-link">意见反馈</a>
                        </div>
                    </div>
                    <div class="right">
                        <table>
                            <tr>
                                <td width="130px">
                                    <img src="image/4.png" alt="" srcset="" width="100px" height="100px">
                                </td>
                                <td>
                                    <img src="image/5.jpg" alt="" srcset="" width="100px" height="100px">
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: center; padding-top: 20px;padding-right: 20px;">
                                    <span>H5</span>
                                </td>
                                <td style="text-align: center;padding-top: 20px;"><span>团队群</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </footer>
            <div class="foot-copyright">
                <span>Copyright © 2021 在校开发团队所有</span>
            </div>
        </div>
    </div>
    <script src="../layui/layui.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="js/same.js"></script>
    <script src="js/personal.js"></script>
    <script>
        layui.use(['laydate', 'upload'], function () {
            let laydate = layui.laydate;
            let upload = layui.upload;


            //日期
            laydate.render({
                elem: '#date',
                theme: '#088A68',
                trigger: 'click'   //解决闪退问题
            });

            //执行实例
            upload.render({
                elem: '#test2', //绑定元素
                url: 'http://localhost:8080/file/upload', //上传接口
                accept: 'images',
                auto: true,
                data: {
                    userId: function () {
                        return app.user.userId;
                    },
                    image: function () {
                        return app.user.image;
                    }
                },
                before: function (obj) {

                    console.log(obj);

                    obj.preview(function (file, index, result) {
                        $('#test1').attr('src', 'http://localhost:1801/image/' + result);
                    })
                }
                , done: function (res, index, upload) {

                    console.log(res);
                    //console.log(res);
                    console.log("aa");
                    if (res.code == 0) {
                        $('#test1').attr('src', 'http://localhost:1801/image/' + res.data);
                    }
                    //上传完毕回调

                    // 修改成功重新设置用户信息会话存储数据
                    // let newUser = {
                    //     userId: app.user.userId,
                    //     userName: app.user.userName,
                    //     password: app.user.password,
                    //     realName: app.user.realName,
                    //     phone: app.user.phone,
                    //     sex: app.user.sex,
                    //     age: app.user.age,
                    //     birthday: app.user.birthday,
                    //     userLevel: app.user.userLevel,
                    //     role: app.user.role,
                    //     image: res.data,
                    //     status: app.user.status,
                    //     createTime: app.user.createTime
                    // }
                    // sessionStorage.setItem("user", JSON.stringify(newUser));
                    // app.user = JSON.parse(sessionStorage.getItem("user"));
                },
                error: function (res) {
                    console.log(1);
                    console.log(res);
                }
            });

        });


    </script>
</body>

</html>